<template>
  <div>
    <h1 class="card-title">回调openId页面</h1>
    <hr/>
    <div class="autoLine">回调url链接：{{ userUrl }}</div>
    <hr/>
    <div class="autoLine">用户openId：{{ openId }}</div>
  </div>
</template>
<script>

import { getAction } from '@/utils/api'
import getQueryString from '@/utils/utils'

export default {
  name: 'OpenId',
  data() {
    return {
      title: '获取用户信息回调页面',
      userUrl: '',
      openId: ''
    }
  },
  watch: {},
  created() {
  },
  mounted() {
    const query = this.$route.query
    console.log(query)
    this.userUrl = window.location.href
    this.getUserInfo()
  },

  methods: {
    getUserInfo() {
      let url = 'http://wechat.proxy.bzchao.com/wechat/user/userInfo'
      //从url中获得code，并请求后端，拿到用户的openId
      let code = getQueryString('code')
      let params = { code: code }
      getAction(url, params).then(res => {
        console.log(res)
        this.openId = res.data.openid
      })
    }
  }
}
</script>

<style scoped>
.autoLine {
  /*设置内容超出后自动换行*/
  word-wrap: break-word;
  word-break: break-all;
}
</style>
